<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="set">set</button>
    <button id="get">get</button>
    <button id="remove">remove</button>
    <button id="clear">clear</button>
  </body>
  <script>
    // 本地存储
    console.log(localStorage);
    document.getElementById("set").onclick = function () {
    //   console.log("111");
      var obj = {
        name: "zs",
      };
      // 存数据
      localStorage.setItem("key1", "value1");
      localStorage.setItem("key2", "value2");
      localStorage.setItem("obj", JSON.stringify(obj));
    };

    document.getElementById("get").onclick = function () {
    //   console.log("222");
      var obj = {
        name: "zs",
      };
      // 取数据
      console.log(localStorage.getItem("key1"));
      console.log(localStorage.getItem("key2"));
      console.log(localStorage.getItem('obj'));
    };
    document.getElementById("remove").onclick = function () {
    //   console.log("222");
      var obj = {
        name: "zs",
      };
      // 移除数据
      console.log(localStorage.removeItem("key1"));
      console.log(localStorage.removeItem("key2"));
      console.log(localStorage.removeItem('obj'));
    };
    document.getElementById("clear").onclick = function () {
    //   console.log("222");
      var obj = {
        name: "zs",
      };
      // 清除数据
      console.log(localStorage.clear());
    };
  </script>
</html>
